<template>
  <div class="zhuangtai" ref="zhuang">123</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import * as echarts from "echarts";
const zhuang = ref();
const option = reactive({
  color: ["#F56463", "#00C6FF", "#F09615", "#0079E6", "#00fe7c"],
  tooltip: {
    trigger: "item",
    formatter: "{d}%",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["50%", "50%"],
      roseType: "radius",

      labelLine: {
        length: 1,
        length2: 20,
      },
      data: [
        {
          name: "返校重听",
          value: 1,
        },
        {
          name: "以往未就业",
          value: 2,
        },
        {
          name: "未就业",
          value: 3,
        },
        {
          name: "毕业未就业",
          value: 4,
        },
        {
          name: "已就业",
          value: 5,
        },
      ],
    },
  ],
});
let asd;
onMounted(() => {
  asd = echarts.init(zhuang.value);
  asd.setOption(option);
});
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});
</script>

<style lang="scss">
.zhuangtai {
  width: 90%;
  height: 100%;
  background: url("../imgs/border1.png") no-repeat;
  background-size: 100% 100%;
  margin: 1% 5%;
}
</style>
